<template>
  <div :style="{height:m_Height,width:m_Width}">

  </div>
</template>

<script>
import {reviver} from './../utils/index'
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import request from '@/utils/request';
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    m_Width: {
      type: String,
      default: '100%'
    },
    m_Height: {
      type: String,
      default: '350px'
    },
    m_ModuleName: {
      type: String
    },
    m_EchartName: {
      type: String
    },
    m_EchartParams: {
      type: Object,
      default()
      {
        return {}
      }
    },
    parentObj: {
      type: Object,
      default()
      {
        return {}
      }
    }
  },
  data()
  {
    return {
      chart: null,
      chartParams: null
    }
  },
  methods: {
    reviver,
    // 初始化图表
    initChart(P_ChartParams)
    {
      if (P_ChartParams)
      {
        this.chartParams = P_ChartParams;
      }
      else
      {
        this.chartParams = this.m_EchartParams;
      }
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions()
    },
    setOptions()
    {
      request({
        url: "/buildChart",
        method: 'GET',
        params: {
          moduleName: this.m_ModuleName,
          chartName: this.m_EchartName,
          chartParams: this.chartParams ? JSON.stringify(this.chartParams) : JSON.stringify({})
        }
      }).then(res =>
      {
        // console.log(res,"echarts");
        try
        {
          let option = JSON.parse(res.result.m_ChartOptionStr,this.reviver);
          console.log(option,"==================echarts")
          this.chart.setOption(option);
        } catch (err)
        {
          console.error(err);
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
